<template>
  <div
    class="rela"
    style="margin: 40px; border: 1px solid #eeeeee; width: 375px; height: 680px"
  >
    <!-- 标题 -->
    <div
      class="rela flexcen"
      style="text-align: center; height: 40px; line-height: 40px"
    >
      <img
        v-if="showBack"
        class="shou abso"
        style="width: 20px; height: 20px; top: 10px; left: 5px"
        src="@/assets/images/back.png"
        alt=""
        @click="back"
      />
      <div style="max-width: 180px" class="overtxt">{{ info.taskName }}</div>
    </div>
    <!-- 内容 -->
    <div class="content">
      <img
        class="icon"
        :src="
          type == 'onlineExam'
            ? require('@/assets/images/mini/online.png')
            : type == 'practice'
            ? 'https://oss.metaxun.com/wx/zy/lianxi.png'
            : type == 'testCheck'
            ? 'https://oss.metaxun.com/wx/zy/kaohe.png'
            : require('@/assets/images/mini/offline.png')
        "
      />
      <div class="examName">
        {{
          type == "onlineExam"
            ? "考核"
            : type == "offlineExam"
            ? "线下考核"
            : type == "testCheck"
            ? "考核抽查"
            : type == "homework"
            ? "作业"
            : "习题练习"
        }}
      </div>

      <div class="item flexcen" v-if="info.duration">
        <div class="lable">考试时间</div>
        <div class="value overtxt">
          {{ info.duration ? info.duration : "--" }}分钟
        </div>
      </div>
      <div class="item flexcen">
        <div class="lable">卷面总分</div>
        <div class="value overtxt">
          {{ info.totalScore ? info.totalScore : "--" }}分
        </div>
      </div>
      <div class="item flexcen">
        <div class="lable">通过分数</div>
        <div class="value overtxt">
          {{ info.passingGrade ? info.passingGrade : "--" }}分
        </div>
      </div>
      <div class="item flexcen">
        <div class="lable">已补考次数</div>
        <div class="value overtxt">
          {{ info.makeupExamNum ? info.makeupExamNum : 0 }}
        </div>
      </div>
      <div class="item flexcen">
        <div class="lable">
          {{ type == "testCheck" ? "抽查说明" : "试卷说明" }}
        </div>
        <div class="direction">
          {{ info.direction }}
        </div>
      </div>
      <div class="handle shou" @click="startExam()">
        {{
          type == "onlineExam" || type == "offlineExam"
            ? "开始考试"
            : type == "testCheck"
            ? "开始考核"
            : type == "homework"
            ? "开始作业"
            : "开始练习"
        }}
      </div>
    </div>
  </div>
</template>
  
<script>
import { getPaperByExamId } from "@/api/exam/paper";
import { getExam } from "@/api/exam/exam";
export default {
  props: {
    examId: [Number, String],
    taskName: [Number, String],
    type: String,
    showBack: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      info: {},
    };
  },
  watch: {
    examId(e) {
      console.log(e);
      // this.getPaper();
    },
  },
  methods: {
    back() {
      this.$emit("paperBack");
    },

    startExam() {
      this.$emit("toPapering", { info: this.info });
    },
    async getPaper(examId) {
      console.log("开始开始页面获取考试信息", examId);
      let res = await getExam(examId);
      this.info = res.data;
    },
  },
};
</script>
<style scoped lang="scss">
@mixin btn_plain($bg_color, $color) {
  background: $bg_color;
  color: $color;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  font-size: 28px;
  &:active {
    background: darken($bg_color, 10%);
    color: darken($color, 18%);
  }
  &:disabled {
    background: lighten($bg_color, 10%);
    color: lighten($color, 40%);
  }
  @content;
}
.content {
  box-sizing: border-box;
  overflow-x: hidden;
  height: 650px;
  overflow-y: scroll;
  padding-top: 60px;
  .icon {
    margin: 0 145px 0 155px;
    width: 60px;
    height: 60px;
  }

  .examName {
    // margin-top: 8px;
    text-align: center;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
  }

  .workstation {
    margin-bottom: 32px;
    margin-top: 12px;
    text-align: center;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
  }
  .item {
    margin-top: 12px;
    .lable {
      margin: 0 40px 0 0;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
    }

    .value {
      width: 160px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
    }
    .direction {
      width: 160px;
      max-height: 100px;
      overflow-y: auto;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
    }
  }

  .handle {
    margin: 88px auto 0 auto;
    @include btn_plain(#ff4d03, #ff9a00) {
      width: 342px;
      height: 44px;
      color: white;
      border-radius: 22px;
      font-size: 14px;
    }
  }
}
</style>
  